<template>

	<view class="appraise">
		<view class="content">
			<view class="left">
				<image :src="detail.image1" mode="aspectFill"></image>
			</view>
			<view class="right">
				<u--text size="16" lineHeight="30" :text="detail.theme" :bold="true"></u--text>
				<u--text size="14" text="举行时间" :bold="true"></u--text>
				<u--text size="11" :text="detail.starttime +'~'+ detail.endtime" type="info"></u--text>
				<view class="address">
					<u--text size="14" text="活动地点" :bold="true"></u--text>
				</view>
				<u--text size="11" wordWrap="anywhere" :text="detail.address" type="info"></u--text>
			</view>
		</view>

		<view class="pj-form">
			<u--text size="18" lineHeight="36" text="请对本次组局进行评价" :bold="true" align="center"></u--text>
			
			<u--form labelPosition="left"  :model="model1" ref="uForm">
				<u-form-item label="本局局长:" labelWidth="80" prop="comment" borderBottom ref="item2">
					<text>{{detail.leader.name}}</text>
				</u-form-item>
				
				<u-form-item label="评价:" prop="comment" borderBottom ref="item2">
					<u-radio-group v-model="model1.comment">
						<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in commentList" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="建议:"></u-form-item>
				<u-form-item >
					<u--textarea v-model="model1.remark" placeholder="请输入建议"></u--textarea>
				</u-form-item>
			</u--form>

			<u-button @click="submit" customStyle="background-color: #ffd91d;margin-top: 50rpx;">提交</u-button>
		</view>
	</view>

</template>

<script>
	import * as EventApi from '@/api/event.js'
	import * as CommentApi from '@/api/comment.js'
	
	export default {
		data() {

			return {

				detail: {},
				model1: {
					comment: '',
					remark: ''
				},
				commentList: [{
						name: '好评',
					},
					{
						name: '差评',
					},
				],

				rules: {
					'comment': {
						type: 'string',
						required: true,
						message: '请评价',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(e) {
			this.model1.event_nid = e.id
			this.getDetail(e.id)
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {

			getDetail(id) {
				let that = this;
				EventApi.detail({
					id: id
				}).then(res => {
					that.detail = res.info
				})
			},
			
			gotoDirector(nid) {
			
				uni.navigateTo({
					url: '/pages/director/index?member_nid=' + nid
				})
			
			},
			
			
			
			submit() {

				this.$refs.uForm.validate().then(res => {
					this.model1.leader_nid = this.detail.leader.nid
					console.log(this.model1)
					CommentApi.add(this.model1).then(res => {
						uni.$u.toast(res.info)

						if (res.status == 200) {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/myactivity/myactivity'
								})
							}, 2000)
						}

					})
				}).catch(errors => {
					//	uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f8f8f8;
		
		
		.user-info {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
		
			.user-nickname {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
		
				&>text {
					font-size: 20;
					font-weight: bold;
					font-family: 'Segoe UI';
				}
			}
		}

		.appraise {
			margin: 30rpx;
			border-radius: 30rpx;
			background: #FFF;

			.content {
				display: flex;

				.left {
					width: 250rpx;

					image {
						width: 250rpx;
						height: 250rpx;
						border-radius: 30rpx;
					}
				}

				.right {
					margin-left: 20rpx;
					width: 430rpx;
				}

				.address {
					margin-top: 15rpx;
				}
			}

			.pj-form {
				padding: 25rpx;

				.submit {
					margin-top: 50rpx;
					background: #ffd91d;
				}
			}
		}
	}
</style>